关于React项目中，require无法动态加载本地图片

2024-07-13 13:13| 来源: 网络整理| 查看: 265

目录 1. React加载本地图片的方法1.1 方法一1.2 方法二 2. 关于使用require无法加载图片的解决方案2.1 案例一2.2 案例二 3.参考文献

1. React加载本地图片的方法 1.1 方法一

第一种方法相信大多数人用的比较多，而且出现无法加载图片的错误比较少。

import user from '../img/user.png' require('../img/icon1.png')} alt="" />

补充一句：require中只能写字符串，不能写变量。

2. 关于使用require无法加载图片的解决方案 2.1 案例一

我们使用方法二读取图片，运行时却无法加载出来图片，对于这种问题我网上找了二种方案，第一种如下所示：

但是如果使用"file-loader": "^4.2.0"或者"file-loader": "^2.0.0"却可以正常打包后来发现file-loader在新版本中esModule默认为true，因此手动设置为false { test: /.(png|jpg|gif|jpeg)$/, use: [{ loader: 'url-loader', // loader: 'file-loader', options: { esModule: false, // 这里设置为false name: '[name].[ext]', limit: 10240 } }] }

方案二（推荐使用）

require('~/images/2.png').default 就好了 ps:但是如果使用react脚手架的配置是不需要用.default的，而是直接require(url)的 2.2 案例二

这个案例，时根据自己学习过程中碰到的，大致的描述我的需求：首先，我使用React搭建一个后台管理系统，然后需要将本地数据转为json格式然后通过React读取显示到前端界面上，其中我的文件有文字以及图片，文字很好读取，关键时图片如何获取这是一个难点。所以我接下来说说我自己如何攻破这个难点的： 1）首先我截取一部分我的json数据如下所示：

{ "success": true, "msg": "", "titleImg": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youjiIcon_38.png", "travelnote": [ { "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-1", "writer": "\u4f59\u982d\u5c0f\u59d0Rachel", "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6", "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.png" }, { "title": "\u8de8\u8d8a\u8d64\u9053\u7684\u871c\u6708\u884c-\u9189\u7f8e\u6bdb\u91cc\u6c42\u65af-2", "writer": "\u4f59\u982d\u5c0f\u59d0Rachel", "content": "\u82b1\u306e\u6642\u5149\u65c5\u884c \u3010\u6642\u5149\u65c5\u884c\u3011\u5e74\u8f7b\u5c31\u662f \u7528\u6765\u6298\u817e\u7684\uff0c\u6709\u529b\u6c14\u53bb\u60f3\uff0c \u53bb\u505a\uff0c\u800c\u662f\u4e3a\u4e86\u7a33\u5b9a\u4e22\u6389\u9752\u6625\uff0c\u4e3a\u4e86\u5e73\u6de1\u4e22\u6389\u68a6", "img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg" } ] }

2）我需要获取其中的字段img

"img": "http:\/\/iwen.wiki\/sxtstu\/blueberrypai\/indexImg\/youji_38.pngg"

然后我们获取到了img字段，得到的只是个链接，并不是图片，所以需要使用下面这个标签才能显示出图片：

require('@/assets/images/'+ item.img).default} /> 3.参考文献

1. 在react中img使用require无法引入图片

2. 关于vue项目中，使用require动态加载本地图片

【本文地址】

公司简介

联系我们